<template>
	<view class="cut_order_detail">
		<view class="daojishi" v-if="countTxt">
			<text style="color: #8c6c49;">{{countTxt}}</text>
		</view>
		<view class="cut_pro_box">
			<view class="pro_detail">
				<image class="imgs" mode="aspectFit" :src="getFirstImg(proDetailObj.images)">
				</image>
				<view class="pro_right">
					<text class="protitle">{{proDetailObj.name}}</text>
					<view class="cut_price">{{proDetailObj.type==2?'额度奖品':proDetailObj.type==1?'黄金奖品':'实物奖品'}}</view>
					<text class="old_price">价值：￥{{proDetailObj.price}}</text>
					<text class="end_time">活动时间截止 {{proDetailObj.endDate}}</text>
				</view>
			</view>
			<view class="progress_bar">
				<view class="bar_wai">
					<view class="bar_li" :style="{width:cutBarWidth}"></view>
				</view>
				<view class="price_num">
					<text>已踢￥{{proDetailObj.kanPrice}}</text>
					<text>{{getRemainMoney(proDetailObj.price,proDetailObj.payPrice,proDetailObj.kanPrice)}}</text>
				</view>
			</view>
			<view class="proOverdue" v-if="isProOverdueSta && proDetailObj.status=='1'">商品已失效</view>
			<view class="cut_success" v-if="proDetailObj.status=='2' && !isProOverdueSta && whoEnter=='me'">
				<view class="cut_success_icon">
					<image src="../../static/weixiao.png" mode="aspectFit"
						style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
					<text>恭喜您踢脚成功，快去提交活动订单吧~</text>
				</view>
				<view class="cut_success_btn" @click="cutPayment">提交活动订单</view>
			</view>
			<view class="invite_friend" v-if="proDetailObj.status=='1' && whoEnter=='me' && !isProOverdueSta"
				@click="toShareUQR">邀请好友帮踢一脚
			</view>
			<!-- <view class="invite_friend" @click="toShareUQR">邀请好友帮踢一脚
			</view> -->
			<view class="invite_friend" v-if="whoEnter=='me' && proDetailObj.status=='3'">待发货</view>
			<view class="invite_friend" v-if="whoEnter=='me' && proDetailObj.status=='4'">已发货</view>
			<view class="invite_friend" v-if="whoEnter=='others' && !isProOverdueSta" @click="helpFriend">帮好友踢一脚</view>
			<view class="more">
				<view class="more_pro" @click="getMore">抢更多商品</view>
				<view class="more_pro" @click="toHome">回首页逛逛</view>
			</view>
			<view class="help_num" v-if="whoEnter=='me'">已有<text
					style="color: #eb3324;">{{helpCutList.length}}</text>位好友帮您踢一脚</view>
		</view>
		<view class="rules_list">
			<view class="title">活动规则须知</view>
			<view class="rule_type">
				<text v-if="proDetailObj.type==1">1.当前商品为黄金商品，踢脚成功后，去提交活动订单，等待商城发货。</text>
				<text v-if="proDetailObj.type==2">1.当前商品为额度商品，踢脚成功后，去提交活动订单，相应购物额度会发放至您参与活动的账号。额度用于商城购物，不可提现！</text>
				<text v-if="proDetailObj.type==3">1.当前商品为实物商品，踢脚成功后，去提交活动订单，等待商城发货</text>
				<text>2.{{proDetailObj.activityRule}}</text>
				<text>3.当前订单状态为正常有效状态,踢脚总额等于商品价值总额，且能够正常提交订单，方为踢脚成功。</text>
				<text>4.针对于状态异常的订单，本平台有权对其进行处理。</text>
				<text>5.所有活动商品均不支持退货、换货，活动商品一切解释权归本商城所有。</text>
			</view>

		</view>
		<view class="help_list" v-if="helpCutList.length>0 && whoEnter=='me'">
			<view class="title">帮踢好友</view>
			<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" style="max-height: 450rpx;white-space: nowrap">
				<view class="list">
					<vie针对性w class="list_item" v-for="(item,index) in helpCutList" :key="index">
						<text>{{item.telephone}}<text style="margin-left: 30rpx;">-￥{{item.helpKanPrice}}</text></text>
						<text>{{item.createTime}}</text>
					</view>
				</view>
			</scroll-view> -->
			<swiper class="notice-c" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
				:vertical="true" :circular="true">
				<swiper-item v-for="(item,index) in helpCutList" :key="index">
					<view class="swiper-item">
						<text>{{item.telephone}}<text style="margin-left: 30rpx;">-￥{{item.helpKanPrice}}</text></text>
						<text>{{item.createTime}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="wuliu_list" v-if="Object.keys(userAddressObj).length != 0">
			<view class="title">物流详情</view>
			<view class="wuliu_box">
				<view class="wuliu_item">
					<text class="text1">姓名</text>
					<text>{{userAddressObj.userName}}</text>
				</view>
				<view class="wuliu_item">
					<text class="text1">电话</text>
					<text>{{userAddressObj.userPhone}}</text>
				</view>
				<view class="wuliu_item">
					<text class="text1">物流公司</text>
					<text>{{userAddressObj.expressName}}</text>
				</view>
				<view class="wuliu_item">
					<text class="text1">物流单号</text>
					<text>{{userAddressObj.expressNo}}</text>
				</view>
				<view class="wuliu_item">
					<text class="text1">收货地址</text>
					<text>{{userAddressObj.addressDetail}}</text>
				</view>
			</view>
		</view>
		<view class="pro_detail_img">
			<view class="title">商品详情</view>
			<view>
				<image v-for="(item,index) in proDetailImgList" :key="" :src="item.url" mode="aspectFill"
					style="width: 100%;display: block"></image>
			</view>
		</view>

		<!-- 海报蒙层的X -->
		<image v-if="showCloseSta"
			src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/4c3c4c2323cf414bafba415b787c05e5.png"
			mode="aspectFit" class="chaImg" @click="cha_btn">
		</image>

		<!-- 海报1 -->
		<view class="hb_outMeng" v-if="hbOutMengIsShow">
			<view>
				<canvas class="canvasBox" canvas-id="firstCanvas" id="firstCanvas"></canvas>
			</view>
			<!--  #ifndef  H5 -->
			<view class="hb_bottom">
				<view class="saveBox" @click="saveImg">
					<image
						src="https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/f66e3820420e4c7492403559acaa8309.png"
						mode="aspectFit" style="width: 70rpx;height: 70rpx;margin-bottom: 10rpx;"></image>
					<text>保存图片</text>
				</view>
				<view class="saveBox" @click="copyCode">
					<image
						src="https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/15dcca9254ed4d8bbadeba45c3a017b5.png"
						mode="aspectFit" style="width: 70rpx;height: 70rpx;margin-bottom: 10rpx;"></image>
					<text>复制链接</text>
				</view>
			</view>
			<!--  #endif -->
		</view>

		<!-- 海报转图片 -->
		<view class="hb_outMeng" v-if="baseImgSta">
			<view style="width: 600rpx;height: 1000rpx;background-color: #ffffff;margin: 200rpx auto 0 auto;">
				<image :src="baseImgString" mode="aspectFit"
					style="width: 600rpx;height: 1000rpx;display: block;margin: 200rpx auto 0 auto;-webkit-touch-callout:default">
				</image>
				<!--  #ifdef  H5 -->
				<view class="isShowIos">
					<view class="isIosBrowser" v-if="isSafari">
						<a :href="baseImgString" download="share.png">点击下载或截图</a>
					</view>
					<view class="copyShareLink" @click="copyLink">复制分享链接</view>
				</view>
				<!--  #endif -->

				<!--  #ifdef  APP-PLUS -->
				<view class="isShowIos">
					<view class="isIosBrowser" @click="appSaveImg">
						点击保存图片
					</view>
					<view class="copyShareLink" @click="copyLink">复制分享链接</view>
				</view>
				<!--  #endif -->
			</view>
		</view>

		<wyb-popup ref="cutHelpText" type="center" height="240" width="400" radius="6" :showCloseIcon="true">
			<view class="cutHelpText" style="padding-top: 25rpx">
				<view class="title">成功帮踢{{helpKanPrice}}元</view>
				<view class="cut_price">您也可以踢脚低价拿哦，快去</view>
				<view class="cut_price1">挑选心仪的商品吧~</view>
				<view class="cut_want_btn" @click="otherWantGet">我也想拿</view>
			</view>
		</wyb-popup>

		<wyb-popup ref="userLogin" type="center" height="240" width="400" radius="6" :showCloseIcon="true">
			<view class="userLogin">
				输入手机号输入手机号输入手机号
			</view>
		</wyb-popup>

		<view class="fire" v-if="fireworkSta">
			<image @click="toCutDetailPage" class="new_img" mode="aspectFit"
				src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/c59ee02a57714197ba0316bc3627f325.png"></image>
			<image @click="quxiaoShare" class="quxiao" src="../../static/share/quxiao.png" mode="aspectFit"
				style="width: 70rpx;height: 70rpx;margin-right:5rpx"></image>
			<view class="cut_price" :text="popText">{{popText}}</view>
		</view>
		<!-- <canvas style="width: 100%;height: 100%;">
			<image :src="baseImgString" mode="aspectFit" style="width: 600rpx;height: 1000rpx;"></image>
		</canvas> -->
		<!-- <image :src="qrCodeImage" mode="aspectFit"></image> -->
		<!-- <view v-if="ewmIsShow" class="wuwuwu">
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value=getQRCodeUrl() size='200' :options="{  margin:20,
						foreground: {
						    image: {
						      src: 'https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/e2454b052f7541c1822f7dcce87a43f3.png',
						      width: 50,
						      height: 50,
						      align: ['center', 'center'],
						      anchor: [0, 0]
						    }
							}
							}" @complete=" complete($event)"></uqrcode>
		</view> -->
	</view>
</template>

<script>
	import QRCode from 'qrcode'
	import {
		getUserId,
		formateTimeStamp
	} from '@/utils';
	// import uqrcode from "../Sansnn-uQRCode/components/uqrcode/uqrcode.vue"
	export default {
		name: '',
		props: {},
		data() {
			return {
				dsqtimer: null,
				baseImgSta: false,
				baseImgString: '',
				saveBaseImgSrc: '', //h5的canvas64位
				statusName: [
					'',
					'参与中',
					'待支付',
					'待发货',
					'已发货',
					'已失效'
				],
				nowRemainPrice: '', //现在还剩下支付多少钱就可以砍价成功
				userAddressObj: {},
				fireworkSta: false,
				popText: '帮踢了199.99元',
				helpKanPrice: '',
				isProOverdueSta: false, //商品是否失效  true：失效
				cutBarWidth: '1%', //砍价进度条的宽度（百分比）
				scrollTop: 0,
				proDetailObj: {},
				helpCutList: {},
				proDetailImgList: [],
				prizeId: '',
				prizeUid: '', //发起砍价人的uid
				whoEnter: '', //me：表示本人进去的，others:别人通过扫码进去帮砍价的
				times: {},
				countTxt: '',
				timer: null,
				yaunjia: 899,
				yikanjia: 654.77,
				hbOutMengIsShow: false,
				showCloseSta: false,
				showRemainText: false,
				ewmIsShow: false,
				ewmCode: '',
				qrCodeImage: '',
				proMainBaseStr: '',
				richIconBaseStr: '',
				richIcon: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/03707ac09f1d4bee91d5524661971cf2.png',
				kanjiaIcon: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/f6a58d55c6a64258b8755cfc91016e69.png',
				isSafari: false,
				copyLinks: '', //分享好友复制的链接
				userIp: '',
			};
		},
		components: {
			// uqrcode
		},
		created() {},

		onLoad(e) {
			// this.mistiming(new Date('2024-04-13 13:29:00').getTime())
			console.log('是me进这个详情页还是others进入这个详情页', e);
			this.userIp = uni.getStorageSync('userIp') || ''
			this.whoEnter = e.whoEnter
			this.prizeId = e.prizeId
			if (e.prizeUid) {
				this.prizeUid = e.prizeUid
			} else {
				this.prizeUid = getUserId()
			}
			this.copyLinks =
				`https://run.nbqlkj.com/#/pagesInfo/cutOrderDetail/cutOrderDetail?whoEnter=others&prizeId=${this.prizeId}&prizeUid=${this.prizeUid}`
			this.getCutProDetail(this.prizeId, this.prizeUid)
			this.generateQRCode()
			this.judgeBrowserEnv()

			// this.urlToBase64(this.richIcon)

			// Objobj.then((res) => {
			// 	console.log('嘿嘿呵呵', res);
			// 	this.richIconBaseStr = res
			// })
		},

		onUnload() {
			console.log('退出了当前的页面');
			clearInterval(this.timer);
			this.timer = null
		},
		methods: {
			//判断当前浏览器环境
			judgeBrowserEnv() {
				let ua = navigator.userAgent.toLowerCase(); // 这里将所有字母转小写
				console.log('判断h5所在浏览器的类型', ua);
				if (ua.indexOf('safari') !== -1 && ua.indexOf('iphone') !== -1 && ua.indexOf('mqqbrowser') === -1) {
					console.log('是ios浏览器');
					this.isSafari = true
					this.shareImgText = '截图保存或者扫描二维码进入'
				} else {
					console.log('不是ios浏览器');
					this.isSafari = false
					this.shareImgText = '长按保存或者扫描二维码进入'
					//不是safari浏览器或者ios手机谷歌浏览器，是其他浏览器
				}
			},
			//复制分享链接给好友
			copyLink() {
				uni.setClipboardData({
					data: this.copyLinks,
					success: (r) => {
						uni.showToast({
							title: '复制成功,去分享给好友来踢脚吧',
							icon: 'none',
							duration: 3000
						});
					}
				});
			},
			//app上的保存图片
			appSaveImg() {
				let this_ = this
				uni.canvasToTempFilePath({
					// x: 0,
					// y: 0,
					// width: 317,
					// height: 520,
					// destWidth: 180,
					// destHeight: 180,
					quality: 1,
					canvasId: 'firstCanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log('生成的图片路径tempFilePath==', res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
							},
							fail: () => {
								uni.showToast({
									title: '相册功能未授权',
									icon: 'none'
								})
							},
						})
					}
				})
			},
			//链接转二维码图片链接
			generateQRCode() {
				let qrCodeDataUrl =
					`https://run.nbqlkj.com/#/pagesInfo/cutOrderDetail/cutOrderDetail?whoEnter=others&prizeId=${this.prizeId}&prizeUid=${this.prizeUid}`
				QRCode.toDataURL(qrCodeDataUrl)
					.then(url => {
						this.qrCodeImage = url
						console.log('链接转二维码图片链接', this.qrCodeImage);
					})
					.catch(err => {
						console.error(err)
					})
			},
			urlToBase64(url) {
				// let promises

				// 网络地址 或者h5端本地相对路径 可使用request方式
				// promises = new Promise((resolve, reject) => {
				// uni.request({
				// 	url: url,
				// 	method: 'GET',
				// 	responseType: 'arraybuffer',
				// 	success: (res) => {
				// 		const base64 =
				// 			`data:image/${type};base64,${uni.arrayBufferToBase64(res.data)}`
				// 		resolve(base64);
				// 	},
				// 	fail: (err) => {
				// 		reject(err);
				// 	},
				// })

				let toBase64Url = '';
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: async res => {
						let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						toBase64Url = 'data:image/png;base64,' + base64; //不加上这串字符，在页面无法显示
						console.log('newnenwn网络图片转base64', toBase64Url)
						this.richIconBaseStr = toBase64Url
						console.log('0000000000000000000000000099', this.richIconBaseStr);
					}
				})

			},
			getmainBase(url) {
				let toBase64Url = '';
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: async res => {
						let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						toBase64Url = 'data:image/png;base64,' + base64; //不加上这串字符，在页面无法显示
						this.proMainBaseStr = toBase64Url
						console.log('=========proMainBaseStr=====主图---', this.proMainBaseStr);
					}
				})
			},
			//页面最上面的倒计时显示
			mistiming(lefttimestamp) {
				this.timer = setInterval(() => {
					let timeStamp = lefttimestamp - new Date().getTime();
					// console.log('还剩下多少时间戳', timeStamp);
					if (timeStamp > 0) {
						// console.log('倒计时还有继续走');
						this.countTxt = '倒计时' + formateTimeStamp(timeStamp)
					} else {
						console.log('倒计时没了');
						//时间已到，商品已过期
						this.isProOverdueSta = true
						this.countTxt = '商品已失效'
						clearInterval(this.timer);
						this.timer = null
					}
				}, 1000)
			},
			//计算两数之比百分数(进度条显示)
			percentageBar(yuanP, remainP) {
				let result = ((remainP / yuanP) * 100).toFixed(2) + '%';
				return result
			},
			//跳转分享海报页面
			toShareUQR() {
				// #ifdef H5
				console.log('模拟好友帮踢没有登录要登录', getUserId());
				if (!getUserId()) {
					this.$goLogin();
					return;
				}
				this.hbOutMengIsShow = true
				this.showCloseSta = true
				this.showRemainText = true
				this.ewmIsShow = true
				this.showShare()
				// #endif

				// #ifdef  APP-PLUS
				if (!getUserId()) {
					this.$goLogin();
					return;
				}
				this.$onTo(
					`pagesInfo/uqrCodeShere/uqrCodeShere?imgs=${this.getFirstImg(this.proDetailObj.images)}&price=${this.nowRemainPrice}&prizeId=${this.prizeId}`
					)
				// #endif

			},
			cha_btn() {
				this.ewmIsShow = false
				this.hbOutMengIsShow = false
				this.showCloseSta = false
				this.showRemainText = false
				this.baseImgSta = false
			},
			//获取支付宝scheme链接
			getQRCodeUrl() {
				// return `alipays://platformapi/startapp?appId=2021004108644319&page=pages/tabbars/tabbars`
				return this.qrCodeImage
			},
			async complete(e) {
				console.log('解析二维码链接了吗');
				if (e.success == true) {
					this.$refs.uqrcode.toTempFilePath({
						success: res => {
							console.log('组件模式二维码转为图片路径', res);
							this.ewmCode = res.tempFilePath
							this.$forceUpdate()
							if (this.ewmCode) {
								this.$qrCodeResolve()
							}
						}
					});
				}
			},
			async showShare() {
				uni.showLoading({
					title: "海报生成中"
				})
				// await this.$qrCoded
				var context = uni.createCanvasContext('firstCanvas')
				let bigImg = await this.urlToFile(
					'https://img12.360buyimg.com/jdcms/s230x230_jfs/t1/223763/3/41057/121433/66117ceeF4e68530f/5defa8fcb059d1e9.jpg'
				)
				// context.drawImage(this.proMainBaseStr, this.rpxToPx(60), this.rpxToPx(100),
				// 	this.rpxToPx(480), this.rpxToPx(460))
				context.drawImage('../../static/shareImg.jpg', this.rpxToPx(60), this.rpxToPx(100),
					this.rpxToPx(480), this.rpxToPx(460))
				context.drawImage(this.qrCodeImage, this.rpxToPx(330), this.rpxToPx(690), this.rpxToPx(240), this
					.rpxToPx(
						240))

				context.drawImage('../../static/shareImg1.png', this.rpxToPx(0), this.rpxToPx(0), this.rpxToPx(90),
					this
					.rpxToPx(90))


				context.setFontSize(14)
				context.setFillStyle('#ca9e64')
				context.fillText('还差' + this.nowRemainPrice + '元即可踢脚成功,', this.rpxToPx(120), this.rpxToPx(610));

				context.setFontSize(14)
				context.setFillStyle('#ca9e64')
				context.fillText('就差你的临门一脚了!', this.rpxToPx(180), this.rpxToPx(660));

				context.setFontSize(16)
				context.setFillStyle('#8f7046')
				context.fillText(this.$appNameDict[this.$appName], this.rpxToPx(50), this.rpxToPx(750));

				context.setFontSize(12)
				context.setFillStyle('#a4a4a4')
				context.fillText('心动不如行动，年轻人', this.rpxToPx(50), this.rpxToPx(790));

				context.setFontSize(12)
				context.setFillStyle('#a4a4a4')
				context.fillText('都在使用，购物就来', this.rpxToPx(50), this.rpxToPx(830));

				context.setFontSize(13)
				context.setFillStyle('#a4a4a4')
				context.fillText(this.$appNameDict[this.$appName] + '!', this.rpxToPx(50), this.rpxToPx(870));

				context.setFontSize(12)
				context.setFillStyle('#a4a4a4')
				context.fillText(this.shareImgText, this.rpxToPx(145), this.rpxToPx(970));

				// uni.hideLoading()
				context.stroke()
				context.draw()

				this.dsqtimer = setTimeout(() => {
					console.log('定时器延迟300毫秒再执行');
					this.H5Saveimg()
					console.log('走000000000');
					clearTimeout(this.dsqtimer)
					this.dsqtimer = null
				}, 300);
			},
			//h5保存canvas图片
			H5Saveimg() {
				console.log('走111111111');
				let this_ = this
				uni.canvasToTempFilePath({
					// x: 0,
					// y: 0,
					// width: 317,
					// height: 520,
					// destWidth: 180,
					// destHeight: 180,
					quality: 1,
					canvasId: 'firstCanvas',
					success: function(res) {
						console.log('走222222222');
						// 在H5平台下，tempFilePath 为 base64
						console.log('新h5上下载图片成功', res.tempFilePath);
						this_.baseImgString = res.tempFilePath
						this_.hbOutMengIsShow = false
						console.log('走333333333');
						this_.baseImgSta = true
						uni.hideLoading()
						console.log('走444444444');
					},
					fail: function(res) {
						console.log('新h5上下载图片失败了呜呜', res);
					},
					complete: function(res) {
						console.log('新h5上下载图片complete', res);
					}
				})
			},
			//base64转图片
			base64ImgtoFile(dataurl, filename = 'file') {
				let arr = dataurl.split(',')
				let mime = arr[0].match(/:(.*?);/)[1]
				let suffix = mime.split('/')[1]
				let bstr = atob(arr[1])
				let n = bstr.length
				let u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new File([u8arr], `${filename}.${suffix}`, {
					type: mime
				})
			},
			urlToFile(url) {
				return new Promise((resolve) => {
					uni.getImageInfo({
						src: url,
						success(res) {
							resolve(res.path)
							console.log('下载的图片1111222', res);
						},
						fail(res) {
							console.log('fail -> res', res)
							uni.showToast({
								title: '网络异常',
								duration: 2000,
								icon: 'none'
							})
							// this.$emit('close')
						}
					})
				})
			},
			rpxToPx(rpx) {
				console.log('画布图片尺寸的uni.getSystemInfoSync()---', uni.getSystemInfoSync());
				// return (rpx / 750) * uni.getSystemInfoSync().screenWidth
				return (rpx / 750) * uni.getSystemInfoSync().windowWidth
			},
			//点击保存图片
			saveImg() {
				let this_ = this
				uni.canvasToTempFilePath({
					// x: 0,
					// y: 0,
					// width: 317,
					// height: 520,
					// destWidth: 180,
					// destHeight: 180,
					quality: 1,
					canvasId: 'firstCanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log('生成的图片路径tempFilePath==', res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
							},
							fail: () => {
								uni.showToast({
									title: '相册功能未授权',
									icon: 'none'
								})
							},
						})
					}
				})
				this.hbOutMengIsShow = false
				this.showCloseSta = false
				this.showRemainText = false
			},
			getFirstImg(imagesStr) {
				if (imagesStr) {
					return imagesStr.split(',')[0]
				}
			},
			//获取砍价商品详情信息
			getCutProDetail(prizeId, prizeUid) {
				this.$request(
					'apiActivityPrize/findActivityDetail', {
						prizeId: prizeId,
						uid: prizeUid
					},
					'post',
					false,
					true
				).then((res) => {
					if (res.businessSuccess || res.success) {
						this.proDetailObj = res.data

						// let Objobj1 = this.urlToBase64(this.getFirstImg(this.proDetailObj.images))
						// Objobj1.then((res) => {
						// 	console.log('当前商品的主图转base64', res);
						// 	this.proMainBaseStr = res
						// })
						// this.getmainBase(this.getFirstImg(this.proDetailObj.images))
						if (res.data.helpList.length > 0) {
							this.helpCutList = res.data.helpList
						}
						if (res.data.detail) {
							this.proDetailImgList = this.imgRegSrc(res.data.detail);
							console.log('相片详情图片', this.proDetailImgList);
						}

						if (res.data.address && Object.keys(res.data.address).length != 0) {
							this.userAddressObj = res.data.address
						}
						//计算商品失效过期倒计时
						if (this.proDetailObj.status == '1') {
							if (new Date().getTime() > new Date(this.proDetailObj.endDate).getTime() || new Date()
								.getTime() > new Date(this.proDetailObj.overdueTime).getTime()) {
								//过期
								this.isProOverdueSta = true
							} else {
								if (new Date(this.proDetailObj.endDate).getTime() >= new Date(this.proDetailObj
										.overdueTime)
									.getTime()) {
									this.mistiming(new Date(this.proDetailObj.overdueTime).getTime())
								} else {
									this.mistiming(new Date(this.proDetailObj.endDate).getTime())
								}
							}
						} else {
							this.countTxt = this.statusName[parseInt(this.proDetailObj.status)]
						}
					}
				});
			},

			helpFriend() {
				// #ifdef H5 || APP-PLUS
				if (!getUserId()) {
					this.$goLogin();
					return;
				}
				// #endif
				if (this.isProOverdueSta) {
					uni.showToast({
						title: '当前商品已失效',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				this.$request(
					'apiActivityPrize/helpGetPrize', {
						prizeId: this.prizeId,
						// prizeUid: '28e86b182e7fcba67a2c06dc5b85246cb2dd4773dp7tx9sd4xki',
						// uid: '073bab35a7ea65750aa758787f2a149892ff72d62xupe1gz6v06',
						reqIp: this.userIp,
						prizeUid: this.prizeUid,
						uid: getUserId()
					},
					'post',
					false,
					true
				).then((res) => {
					// this.fireworkSta = true
					if (res.businessSuccess || res.success) {
						this.getCutProDetail(this.prizeId, this.prizeUid, )
						this.helpKanPrice = res.data.kanPrice || 0
						if (this.helpKanPrice) {
							this.fireworkSta = true
							this.popText = `帮踢了${this.helpKanPrice}元`
							// this.$refs.cutHelpText.show()
						}
					} else {
						uni.showToast({
							title: res.msg || res.message,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			quxiaoShare() {
				this.fireworkSta = false
			},
			toCutDetailPage() {
				console.log('我也要参与');
				this.$onTo(`pagesInfo/friendCutOrder/friendCutOrder`, false, true)
				this.fireworkSta = false
			},
			cutPayment() {
				console.log('去支付');
				this.$onTo(`pagesInfo/cutPayment/cutPayment?prizeId=${this.prizeId}`)
			},
			otherWantGet() {
				this.$onTo(`pagesInfo/friendCutOrder/friendCutOrder`, false, true)
			},
			//抢更多商品
			getMore() {
				this.$onTo(`pagesInfo/friendCutOrder/friendCutOrder`, false, true)
			},
			//回到首页
			toHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			//计算还要砍多少钱
			getRemainMoney(totalPrice, payPrice, kanPrice) {
				//1：正在进行中  2:可以支付  3:支付完成  4：发货
				if (this.proDetailObj.status != '1' && this.proDetailObj.status != '5') {
					this.cutBarWidth = '100%'
					return '踢脚成功'
				} else {
					//还要砍多少钱才可以拿
					let kanRange = totalPrice - payPrice
					let remainPrice = totalPrice - payPrice - kanPrice
					this.cutBarWidth = ((kanPrice / kanRange) * 100).toFixed(2) + '%';
					this.nowRemainPrice = remainPrice.toFixed(2)
					return `还需踢￥${remainPrice.toFixed(2)}`
				}
			},
			//获取商品详情中的src集合
			imgRegSrc(oldStr, replace = '[***]') {
				if (!oldStr) {
					return false;
				}
				//提取img标签正则
				var imgReg = /<img.*?(?:>|\/>)/gi;
				//提取src正则
				var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
				var newStr = oldStr.slice();
				//获取img标签数组
				var imgArr = newStr.match(imgReg);
				var srcArr = [];
				for (let i = 0; i < imgArr.length; i++) {
					srcArr[i] = imgArr[i].match(srcReg);
					newStr = newStr.replace(srcArr[i][1], replace);
				}
				//imgArr是img标签集合，srcArr是图片src集合，newStr是替换后的新字符串
				// return { imgArr: imgArr, srcArr: srcArr, oldStr: oldStr, newStr: newStr, replace: replace };
				// return { imgArr, srcArr, oldStr, newStr, replace };
				// return { srcArr };

				let newarr = [];
				srcArr.forEach(item => {
					newarr.push({
						url: item[1]
					});
				});
				return newarr;
			},

		}
	};
</script>

<style lang="scss" scoped>
	// .wuwuwu {
	// 	uni-view {
	// 		text-align: center;
	// 		margin: 0 auto;
	// 	}
	// }

	.cut_order_detail {
		box-sizing: border-box;
		padding: 15rpx;
		position: relative;

		.fire {
			position: fixed;
			top: 50%;
			left: 50%;
			border-radius: 10px;
			margin-left: -300rpx;
			margin-top: -350rpx;
			width: 600rpx;
			height: 700rpx;


			.new_img {
				width: 600rpx;
				height: 700rpx;
			}

			.quxiao {
				position: absolute;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			.cut_price {
				position: absolute;
				top: 54%;
				left: 50%;
				transform: translateX(-50%);
				letter-spacing: 0.05em;
				font-size: 46rpx;
				font-weight: bolder;
				white-space: nowrap;
				color: #f9daa3;
				z-index: 999999;
			}

			.cut_price::before {
				content: attr(text);
				position: absolute;
				z-index: -1;
				text-shadow: 1px 5px 0px #ff0307;
			}
		}

		.userLogin {}

		.cutHelpText {
			.title {
				font-size: 28rpx;
				font-weight: 600;
				margin: 0 auto;
				text-align: center;
				color: #e1503d;
			}

			.cut_price {
				text-align: center;
				margin-top: 20rpx;
				font-size: 20rpx;
			}

			.cut_price1 {
				text-align: center;
				font-size: 20rpx;
			}

			.cut_want_btn {
				font-size: 24rpx;
				width: 60%;
				height: 50rpx;
				// background-image: linear-gradient(to right, #f9a067, #f16840, #fa3426);
				background-image: linear-gradient(to right, #f9c082, #be9263, #8c6c49);
				border-radius: 100rpx;
				text-align: center;
				line-height: 50rpx;
				color: #ffffff;
				letter-spacing: 0.1em;
				margin: 20rpx auto 0 auto;
			}
		}

		.daojishi {
			box-sizing: border-box;
			padding: 25rpx 20rpx;
			background-color: #fff4e6;
			margin-bottom: 15rpx;
			border-radius: 20rpx;
			text-align: center;
		}

		.cut_pro_box {
			background-color: #fff4e6;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 15rpx;

			.pro_detail {
				display: flex;

				.imgs {
					width: 200rpx;
					height: 200rpx;
					flex-shrink: 0;
					margin-right: 15rpx;
				}

				.pro_right {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					font-size: 24rpx;

					.protitle {
						font-size: 28rpx;
						font-weight: 600;
					}

					.old_price {
						color: #b0b0b0;
					}

					.end_time {
						color: #b0b0b0;
					}

					.cut_price {
						// color: #e1503d;
						color: #8c6c49;
						font-weight: 600;
						font-size: 24rpx;
						padding: 5rpx 15rpx;
						border: 1px solid #8c6c49;
						width: max-content;
						border-radius: 15rpx;
					}
				}
			}

			.progress_bar {
				width: 100%;
				margin: 40rpx 0;

				.bar_wai {
					border-radius: 15rpx;
					background-color: #d5d5d5;
					margin-bottom: 10rpx;

					.bar_li {
						width: 300rpx;
						height: 12rpx;
						border-radius: 15rpx;
						// background-image: linear-gradient(to right, #f9a067, #f16840, #eb3324);
						background-image: linear-gradient(to right, #f9c082, #be9263, #8c6c49);
					}
				}

				.price_num {
					width: 100%;
					color: #b0b0b0;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.invite_friend {
				width: 100%;
				height: 70rpx;
				// background-image: linear-gradient(to right, #f9a067, #f16840, #fa3426);
				background-image: linear-gradient(to right, #f9c082, #be9263, #8c6c49);
				border-radius: 100rpx;
				text-align: center;
				line-height: 70rpx;
				color: #ffffff;
				letter-spacing: 0.1em;
				margin-bottom: 30rpx;
			}

			.proOverdue {
				width: 100%;
				height: 70rpx;
				background-color: #909090;
				border-radius: 100rpx;
				text-align: center;
				line-height: 70rpx;
				color: #ffffff;
				letter-spacing: 0.1em;
				margin-bottom: 30rpx;
			}

			.cut_success {
				display: flex;
				flex-direction: column;
				align-items: center;

				&_icon {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					letter-spacing: 0.05em;
				}

				&_btn {
					width: 100%;
					height: 70rpx;
					// background-image: linear-gradient(to right, #f9a067, #f16840, #fa3426);
					background-image: linear-gradient(to right, #f9c082, #be9263, #8c6c49);
					border-radius: 100rpx;
					text-align: center;
					line-height: 70rpx;
					color: #ffffff;
					letter-spacing: 0.1em;
					margin-bottom: 30rpx;
				}
			}

			.more {
				width: 100%;
				display: flex;
				justify-content: space-between;

				&_pro {
					width: 48%;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					// border: 1px solid #fa3426;
					border: 1px solid #8c6c49;
					border-radius: 70rpx;
					color: #8c6c49;
					font-size: 26rpx;
					font-weight: 600;
					letter-spacing: 0.05em;
				}
			}

			.help_num {
				font-size: 24rpx;
				color: #b0b0b0;
				text-align: center;
				letter-spacing: 0.1em;
				margin: 20rpx 0;
			}
		}

		.wuliu_list {
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff4e6;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.title {
				text-align: center;
			}

			.wuliu_box {
				color: #b0b0b0;

				.wuliu_item {
					display: flex;
					justify-content: space-between;
					margin: 10rpx 0;

					.text1 {
						white-space: nowrap;
						margin-right: 30rpx;
					}
				}
			}
		}

		.rules_list {
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff4e6;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.title {
				text-align: center;
				font-weight: 600;
			}

			.rule_type {
				font-size: 24rpx;
				color: #909090;

				text {
					display: inline-block;
					margin: 10rpx 0;
				}
			}
		}

		.help_list {
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff4e6;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.notice-c {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				font-size: 22rpx;

				.swiper-item {
					display: flex;
					justify-content: space-between;
					margin: 10rpx 0;
					font-size: 24rpx;
					color: #b0b0b0;
				}
			}

			.title {
				text-align: center;
				font-weight: 600;
			}

			.list {
				.list_item {
					display: flex;
					justify-content: space-between;
					margin: 10rpx 0;
					font-size: 24rpx;
					color: #b0b0b0;
				}
			}
		}

		.pro_detail_img {
			box-sizing: border-box;
			// padding: 30rpx;
			background-color: #fff4e6;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.title {
				text-align: center;
				margin: 20rpx 0;
				font-weight: 600;
			}
		}

		.pro_detail {
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff4e6;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.title {
				text-align: center;
			}
		}

		.hb_outMeng {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100vh;
			z-index: 9;
			background: rgba(94, 94, 94, 0.8);

			.isShowIos {
				display: flex;
				margin-top: 20rpx;

				.isIosBrowser {
					text-align: center;
					margin: 10rpx auto;
					color: #ffffff;
					border: 1px solid #ffffff;
					width: max-content;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
					font-size: 24rpx;

					a {
						color: #ffffff; //字体颜色
						text-decoration: none; //去除a标签下划线
						outline: none; //去掉a标签默认轮廓
					}
				}

				.copyShareLink {
					text-align: center;
					margin: 10rpx auto;
					color: #ffffff;
					border: 1px solid #ffffff;
					width: max-content;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
					font-size: 24rpx;
				}
			}



			.canvasBox {
				display: block;
				margin: 200rpx auto 0 auto;
				width: 600rpx;
				height: 1000rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
			}

			.hb_bottom {
				position: fixed;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 250rpx;
				background-color: #ffffff;
				color: #b7b7b7;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				font-size: 24rpx;

				.saveBox {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}

		.chaImg {
			width: 70rpx;
			height: 70rpx;
			position: fixed;
			right: 50rpx;
			top: 100rpx;
			z-index: 999999;
		}

	}
</style>